import React, { Component } from 'react';
import { Table, Pagination} from 'antd'
import styles from './TableDetailsList.less'


const payType = (item) => {
  if(item == 1){
    return <span>支付宝</span>
  }else if(item == 2){
    return <span>现金</span>
  }else if(item == 3){
    return <span>微信</span>
  }
}

const moneyType = (item) => {
  if(item == 1){
    return <span>消费金</span>
  }else if(item == 2){
    return <span>福利金</span>
  }else if(item == 3){
    return <span>积分</span>
  }else if(item == 4){
    return <span>礼券</span>
  }
}

const getuseType = (type) => {
  switch(type) {
    case 1: return <span>线下充值</span> ; break;
    case 2: return <span>兑换积分</span>; break;
    case 3: return <span>转福利金</span> ;break;
    case 4: return <span>转消费金</span>; break;
    case 5: return <span>利息</span>;break;
    case 6: return <span>粉丝充值</span>; break;
    case 7: return <span>邀请好友</span>; break;
    case 8: return <span>系统自动结转</span>; break;
    case 9: return <span>线下支付</span>; break;
    case 10: return <span>线下收款</span>; break;
    case 11: return <span>线上支付</span>; break;
    case 12: return <span>线上收款</span>; break;
    case 13: return <span>线上充值</span>; break;
  }
}



class BuyerTableList extends Component {
  render() {
    const { storeListDetails ,loading} = this.props
    const { buyerName, totalElements, list} = storeListDetails
    const columns = [
      {
        title: '时间',
        dataIndex: 'createTime',
        key: '2',
        width:"15%"
      },
      {
        title: '货币类型',
        dataIndex: 'type',
        key: '3',
        width:"8%",
        render:(text)=>{
          return(
            moneyType(text)
          )
        }
      },
      {
        title: '用途',
        dataIndex: 'amount',
        key: '4',
        width:"15%",
        render:(text)=>{
          return(
            getuseType(text)
          )
        }
      },
      {
        title: '消费金',
        dataIndex: 'currentMoney',
        key: '5',
        width:"6%"
      },
      {
        title: '福利金',
        dataIndex: 'currentWelfare',
        key: '6',
        width:"6%"
      },
      {
        title: '积分',
        dataIndex: 'currentBonous',
        key: '7',
        width:"6%"
      },
      {
        title: '礼券',
        dataIndex: 'currentGift',
        key: '8',
        width:"6%"
      },
      {
        title: '支付方式',
        dataIndex: 'payType',
        key: '9',
        width:"8%",
        render:(text)=>{
          return(
            payType(text)
          )
        }
      },
      {
        title: '账户余额',
        dataIndex: 'record',
        key: '10',
        width:"25%",
        render:(text, record) => {
          return(
            <div className={styles.record}>
              <ul>
                <li><span>消费金:</span><span>{record.currentMoney}</span></li>
                <li><span>福利金:</span><span>{record.currentWelfare}</span></li>
                <li><span>积分:</span><span>{record.currentBonous}</span></li>
                <li><span>礼券:</span><span>{record.currentGift}</span></li>
              </ul>
            </div>
          )

        }
      },
    ];

    return (
      <div className={styles.BuyerTableDetailsList}>
        <Table  bordered
        columns={columns}
        rowKey={record => record.id}
        loading={loading}
        dataSource={list}/>
        <Pagination defaultCurrent={1} total={ totalElements ? Number(totalElements) : 1} onChange={this.props.onDetailsPageSize} style={{float:'right',marginTop:'20px'}}/>
      </div>
    );
  }
}

export default BuyerTableList;
